<template>
    <div>
      <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <!-- <template v-slot:externalOperations="{data}"  >
          <vxe-form-item>
            <template>
              <a-button class="blue-btn" style="margin-right:10px;" type="primary" @click="addHandele">添加</a-button>
              <a-button class="red-btn" type="primary" @click="deleteBatchHandele">批量删除</a-button>
            </template>
          </vxe-form-item>
        </template>
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
          <a-form layout="inline" class="search-form" >
              <a-form-item>
                  <a-button class="blue-btn" type="primary" @click="editHandele(row)">编辑</a-button>
              </a-form-item>
              <a-form-item>
                  <a-popconfirm
                      title="您确定要删除这条数据吗?"
                      ok-text="确定"
                      cancel-text="取消"
                      @confirm="deleteHandele(row)"
                      @cancel="cancel"
                      >
                          <a-button class="red-btn">删除</a-button>
                  </a-popconfirm>
              </a-form-item>
          </a-form>
        </template> -->
      </commpVxeTable>
      <handleModal ref="handleModalRef" :passObj="passObj" @success="success"></handleModal>
    </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from './handleModal.vue'
import { dyDelete,deleteBatch } from './service/index.js'
export default {
    components: {
        commpVxeTable,handleModal
    },
    props:{
    },
    data() {
        return {
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.list,
                rowId: 'id',
                urlType: true,
                paramet:{}
            },
            formItem: [
            {
                label: '姓名',
                model: 'fxm',
            },{
                label: '入党状态',
                model: 'frdzt',
                type:'Select',
                    options:[{
                        label: '入党申请',
                        value: '入党申请'
                    },{
                        label: '积极分子',
                        value: '积极分子'
                    },{
                        label: '发展对象',
                        value: '发展对象'
                    },{
                        label: '预备党员',
                        value: '预备党员'
                    },{
                        label: '正式党员',
                        value: '正式党员'
                    }]
                },
            ],
            columnsVxe: [
            {
                type: 'checkbox',
                width: 60,
                fixed: 'left'
            },{
                title: '姓名',
                field: 'fxm',
            },{
                title: '入党状态',
                field: 'frdzt',
            },{
                title: '入党申请时间',
                field: 'frdsqsj',
            },{
                title: '确定积极分子时间',
                field: 'fqdjjfzsj',
            },{
                title: '确定发展对象时间',
                field: 'fqdfzdxsj',
            },{
                title: '确定预备党员时间',
                field: 'fqdybdysj',
            },{
                title: '确定入党时间',
                field: 'fqdrdsj',
            },
            // {
            //     title: '操作',
            //     field: 'jobid',
            //     slots: {
            //     // 使用插槽模板渲染
            //     default: 'operation_btn',
            //     },
            // }
            ],
            jobidList: [],
            passObj: {},
        }
    },
    methods: {
      // 勾选
      checkboxChange(val){
        //console.log('已选择',val)
        this.jobidList = []
        if(val.length){
          val.forEach(item => {
              this.jobidList.push(item.jobid)
          });
        }
      },
      // 搜索
      searchEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
        //console.log(this.dataTableConfig.paramet)
      },
      // 重置
      resetEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
      },
      addHandele(){
          this.$nextTick(_ => {
              this.$refs.handleModalRef.handleModalVisible = true
          })
      },
      // 编辑
      editHandele(row){
          this.passObj = {
            ...row,
            id: row.oaid
          }
          this.$nextTick(_ => {
              this.$refs.handleModalRef.handleModalVisible = true
          })
      },
      // 删除
      deleteHandele(row){
        dyDelete({jobids:row.jobid}).then(res => {
              if(res.code == 200){
                  this.$message.success(res.message)
                  this.reCommpVxeTable = Date.now()
              } else {
                  this.$message.warning(res.message)
              }
          })
      },
      // 批量删除
      deleteBatchHandele(){
          let that = this
          if(that.jobidList.length == 0){
              that.$message.warning('请选择删除项目')
          } else {
              that.$confirm({
                  title: '您确定要删除这些数据吗?',
                  content: '',
                  okText: '确定',
                  okType: 'danger',
                  cancelText: '取消',
                  onOk() {
                      let list = that.jobidList.toString()
                      //console.log(list)
                      deleteBatch({jobids:list}).then(res => {
                          //console.log(res)
                          if(res.code == 200){
                              that.reCommpVxeTable = Date.now()
                              that.$message.success(res.message)
                          } else {
                              that.$message.warning(res.message)
                          }
                      })
                  },
                  onCancel() {
                      //console.log('Cancel');
                  },
              });
          }
      },
      cancel(){},
      // 弹窗提交成功
      success(){
        // 刷新表格 清空id数组
        this.$refs.administrativeOffice.searchEvent()
        this.jobidList = []
      },
    },
  }
  </script>
  <style lang="less">
  .red-btn{
      color:  white !important;
      border: 1px solid #ed5565 !important;
      background-color: #ed5565 !important;
  }
  </style>
